<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <detail-container ref="containerRef" v-bind="containerConfig">
    <div style="display: flex; flex-direction: column; height: 100%">
      <lg-description v-loading="loading" :schema="schema" v-bind="descriptionConfig">
        <template #roles>
          <t-space>
            <t-tag v-for="x in data.roles" :key="x.id" theme="primary" variant="light-outline">{{ x.name }}</t-tag>
          </t-space>
        </template>
      </lg-description>
      <lg-table
        class="lg-table-clear gl-mt"
        style="flex: 1"
        :schema="orgSchema"
        :data="data.orgs"
        :index="true"
        :searchbar="false"
        :toolbar="false"
      >
        <template #orgId="{ row }">
          {{ orgs[row.orgId] }}
        </template>
        <template #postId="{ row }">
          {{ posts[row.postId] }}
        </template>
      </lg-table>
      <!--      <lg-table
        class="lg-table-clear gl-margin-t"
        style="flex: 1"
        :schema="accountTypeSchema"
        :data="data.accountBinds"
        :index="true"
        :searchbar="false"
        :toolbar="false"
      >
      </lg-table>-->
    </div>
  </detail-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { DetailContainer, useDetailContainer } from '@/components';
import { LgDescription, LgTable, toMap } from '@/soar';
import schema, { accountTypeSchema, orgSchema } from './schema';
import api from './api';
import orgApi from '@/pages/auth/org/api';
import postApi from '@/pages/auth/post/api';

const containerRef = ref();
const orgs = ref({});
const posts = ref({});

const { containerConfig, descriptionConfig, loading, data, open } = useDetailContainer<any>({
  containerRef,
  header: '用户详情',
  getData: (params: any) => {
    return api.detail(params.id).then((res: any) => {
      res.orgs ??= [];
      orgApi.nameLinkByIds(res.orgs.map((x) => x.orgId)).then((os) => {
        for (const k in os) {
          os[k] = os[k].join(' / ');
        }
        orgs.value = os;
      });
      postApi
        .listByIds(
          res.orgs.filter((x) => x.postId).map((x) => x.postId),
          'id,name',
        )
        .then((ps) => {
          posts.value = toMap(ps, 'id', 'name');
        });
      return res;
    });
  },
  containerProps: {
    width: '1200px',
  },
  descriptionProps: {
    labelWidth: '9em',
  },
});

defineExpose({ open });
</script>
